<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结果</title>
    <meta name="referrer" content="no-referrer">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--    <link th:href="@{/css/navs.css}" rel="stylesheet">-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

    <!--    录音-->
    <script src="../static/plugins/webSoundrecording/webSound/recorder.js"></script>
    <link rel="stylesheet" href="../static/plugins/webSoundrecording/microphone.css"/>
    <script src="../static/plugins/webSoundrecording/microphone.js"></script>

    <style>
        .top{
            margin-top: 200px;
        }
        .container{
            text-align: center;
        }
    </style>
</head>
<body>
<div class="top"></div>
<div class="container">
    <P>请打开您的麦克风才能看到效果</P>
    <h3>功能区</h3>
    <input type="button" value="开始录音" onclick="Start()"/>
    <input type="button" value="结束录音" onclick="Stop()"/>
    <div id="len" style="color:#ff6600;display:inline-block;">录音时长：0.00s</div>
    <div id="loud" style="color:#ff6600;display:inline-block;margin-left:15px;">录音时长：0%</div>
    <input type="button" value="下载音频" onclick="download()"/>
    <h3>录音动画效果</h3>
    <div style="width:120px;height:120px;padding:20px" class="container">
        <div id="Microphone">
        </div>
    </div>
</div>
<!--处理声音-->
<script>
    var recorder = new Recorder({
        sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
        sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
        numChannels: 1, // 声道，支持 1 或 2， 默认是1
        compiling: false, // 是否边录边转换，默认是false
    });

    function isIE() { //ie?
        if (!!window.ActiveXObject || "ActiveXObject" in window)
            return true;
        else
            return false;
    }

    var Start = function () {
        if (isIE()) {
            alert("ie不支持麦克风录音，请更换浏览器！");
        } else {
            recorder.start().then(() => {
                Length();
                //Loud();
                // 开始录音
            }, (error) => {
                // 出错了
                console.log(`${error.name} : ${error.message}`);
            });
        }
    }
    var Stop = function () {
        recorder.stop();
    }
    var Length = function () {
        recorder.onprogress = function (params) {
            var id = document.getElementById("len");
            id.innerHTML = "录音时长：" + params.duration.toFixed(2);
            var idx = document.getElementById("loud");
            idx.innerHTML = "音量大小：" + params.vol.toFixed(0) + "%";
            microphone.volume("Microphone", params.vol);
        }
    }
    var Play = function () {
        recorder.play();
        PlayDur();
    }
    var PlayDur = function () {
        var id = document.getElementById("playTiem");
        id.innerHTML = "音频总时长" + recorder.duration;

        setInterval(function () {
            var idx = document.getElementById("playTime");
            idx.innerHTML = "播放进度" + recorder.getPlayTime();
        }, 1000)

    }
    var download = function () {
        recorder.downloadWAV("video");
    }
</script>


</body>
</html>